<template>
  <div class="table-page">
    <GiTable
      row-key="userWechatGroupId"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @sorter-change="onSorterChange"
      @refresh="getTableData"
      :simple="true"
    >
      <template #custom-extra>
        <a-form
          label-align="right"
          layout="inline"
          auto-label-width
          :model="listParams"
          size="small"
          class="form my-10"
        >
          <a-form-item field="isOpen" label="开启状态">
            <a-select v-model="listParams.isOpen" @change="getTableData" placeholder="请选择" class="w-30n" allow-clear>
              <a-option value="">全部</a-option>
              <a-option :value="0">开启</a-option>
              <a-option :value="1">关闭</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="startAt" label="日期">
            <ms-date
              v-model:start="listParams.startAt"
              v-model:end="listParams.endAt"
              :show-quick="true"
              :disabledDate="(current) => dayjs(current).isAfter(dayjs())"
            ></ms-date>
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" size="small" @click="getTableData">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #materialKeyword="{ record }">
        <a-button type="text" @click="openSetting(record.materialKeyword)">点击查看</a-button>
      </template>
      <template #anchor="{ record }">
        <div class="flex flex-a-c w-full overflow-x-auto">
          <div class="flex-col flex-center mr-6 max-200" v-for="(item, index) in record.materialAnchor" :key="index">
            <a-image alt="头像" width="40" height="40" class="round-50-percent" :src="item.anchorHeadImg" />
            <span class="text-size-12 mt-6">{{ item.anchorName }}</span>
          </div>
        </div>
      </template>
      <template #group="{ record }">
        <div class="group-">
          <a-table :columns="groupColumns" :data="record.materialGroupFollows" :pagination="false">
            <template #preview="materialGroupFollows">
              <a-button
                type="text"
                @click="preview(record.materialGroupConfigId, record.userWechatId, materialGroupFollows)"
              >
                <template #icon><icon-eye /></template>
                预览
              </a-button>
            </template>
          </a-table>
        </div>
      </template>
    </GiTable>
    <a-modal v-model:visible="visible" :footer="false">
      <template #title> 跟群设置 </template>
      <a-descriptions :column="1" bordered v-if="currentMaterialKeyword">
        <a-descriptions-item label="替换词">
          <div class="w-full overflow-x-auto pt-10">
            <div
              v-if="currentMaterialKeyword?.replaceKeyword"
              class="flex flex-a-c inline-block mb-10 mr-20"
              v-for="(item, index) in currentMaterialKeyword.replaceKeyword"
              :key="index"
            >
              <span>{{ item.keyword }}</span>
              <span>=></span>
              <span>{{ item.replaceKeyword }}</span>
            </div>
            <span v-else>--</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="过滤词">
          <div class="w-full overflow-x-auto pt-10">
            <div v-if="currentMaterialKeyword.filterKeyword">
              {{ currentMaterialKeyword.filterKeyword }}
            </div>
            <span v-else>--</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="是否过滤整段">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :model-value="currentMaterialKeyword.isFilterWholeSection"
          >
            <template #checked> 是 </template>
            <template #unchecked> 否 </template>
          </a-switch>
        </a-descriptions-item>
        <a-descriptions-item label="是否过滤图片">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :model-value="currentMaterialKeyword.isFilterPic"
          >
            <template #checked> 是 </template>
            <template #unchecked> 否 </template>
          </a-switch>
        </a-descriptions-item>
        <a-descriptions-item label="是否过滤表情">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :model-value="currentMaterialKeyword.isFilterGif"
          >
            <template #checked> 是 </template>
            <template #unchecked> 否 </template>
          </a-switch>
        </a-descriptions-item>
        <a-descriptions-item label="是否过滤视频">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :model-value="currentMaterialKeyword.isFilterVideo"
          >
            <template #checked> 是 </template>
            <template #unchecked> 否 </template>
          </a-switch>
        </a-descriptions-item>
        <a-descriptions-item label="是否@所有人">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :model-value="currentMaterialKeyword.isAt"
          >
            <template #checked> 是 </template>
            <template #unchecked> 否 </template>
          </a-switch>
        </a-descriptions-item>
      </a-descriptions>
      <div class="pt-50 text-align-center">暂无设置</div>
    </a-modal>
    <Preview ref="PreviewRef" />
  </div>
</template>

<script setup>
import { detailmaterialInfo } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import Preview from './Preview.vue'
import GiDot from '@/components/GiDot/index.vue'
import dayjs from 'dayjs'

const props = defineProps(['userWechatId'])
const visible = ref(false)
const currentMaterialKeyword = ref()
const columns = ref([
  {
    title: '主持人所在素材群',
    tooltip: true,
    ellipsis: true,
    width: 150,
    dataIndex: 'materialGroup',
    align: 'center'
  },
  {
    title: '开启状态',
    width: 100,
    align: 'center',
    render: (data) => {
      const status = data.record.isOpen
      const type = status ? 'success' : 'info'
      const text = status ? '开启' : '关闭'
      return h(GiDot, {
        animation: false,
        type: type,
        text: text
      })
    }
  },
  {
    title: '跟群设置',
    width: 120,
    align: 'center',
    slotName: 'materialKeyword'
  },
  {
    title: '主持人',
    width: 200,
    slotName: 'anchor',
    align: 'center'
  },
  {
    title: '转发群信息',
    width: 660,
    dataIndex: 'group',
    slotName: 'group',
    align: 'center'
  }
])

const groupColumns = ref([
  {
    title: '转发群名称',
    width: 160,
    dataIndex: 'groupName'
  },
  {
    title: '最近跟群发送时间',
    width: 180,
    dataIndex: 'lastSendAt',
    render: (data) => {
      return data?.record?.lastSendAt || '--'
    }
  },
  {
    title: '跟发数量',
    width: 100,
    dataIndex: 'sendNum'
  },
  {
    title: '失败数量',
    width: 100,
    dataIndex: 'sendFailNum'
  },
  {
    title: '操作',
    width: 100,
    align: 'center',
    slotName: 'preview'
  }
])

const loading = ref(false)
const tableData = ref([])
const PreviewRef = ref()

const listParams = reactive({
  userWechatId: undefined,
  isOpen: undefined,
  startAt: undefined,
  endAt: undefined
})

// 打开查看跟群设置
const openSetting = (data) => {
  currentMaterialKeyword.value = data
  visible.value = true
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.userWechatId = props.userWechatId
    const res = await detailmaterialInfo(deleteEmpty(listParams))
    tableData.value = JSON.stringify(res.data) === '{}' ? [] : res.data
  } finally {
    loading.value = false
  }
}

watch(
  () => props.userWechatId,
  () => {
    getTableData()
  },
  { deep: true, immediate: true }
)

// // 发圈详情
// const openDetail = (momentUserSendRecordId, momentName) => {
//   detailRef.value?.open(momentUserSendRecordId, momentName)
// }

//升降序发生改变
const onSorterChange = (dataIndex, direction) => {
  listParams.orderBy = direction ? (direction === 'ascend' ? 'asc' : 'desc') : undefined
  listParams.sort = listParams.orderBy ? dataIndex : undefined
  getTableData()
}

// 列表重置搜索
const onResetSearch = () => {
  listParams.title = listParams.status = undefined
  getTableData()
}

// 跟预览
const preview = (materialGroupConfigId, userWechatId, { record }) => {
  PreviewRef.value?.openModal(
    materialGroupConfigId,
    userWechatId,
    record.materialGroupId,
    record.groupHeadImg,
    record.groupName
  )
}
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
.bgf7 {
  background: #f7f7f7;
}
.max-800 {
  max-width: 800px;
}
.group- {
  :deep(.arco-table-container) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-2);
  }
}
.max-200 {
  max-width: 300px;
}
</style>
